<template>
  <div id="a1">
    <div class="news-tab">
      <!-- @click.native="$router.go(0)" -->
      <router-link
        :class="['item', { active: $route.path == '/strength/doctors' }]"
        to="/strength/doctors#a0"
        >名医臻享</router-link
      >
      <router-link
        :class="['item', { active: $route.path == '/strength/design' }]"
        to="/strength/design#a1"
        >幸福设计</router-link
      >
      <router-link
        :class="['item', { active: $route.path == '/strength/serve' }]"
        class="item"
        to="/strength/serve#a2"
        >五心服务</router-link
      >
    </div>
    <div class="index design">
      <div class="doctors-introduct wow fadeInUp bangxin">
        <div class="img">
          <img :src="ListBanner1.picture" alt="" />
        </div>
        <div class="text">
          <div class="text-con">
            <div class="tit">{{ ListBanner1.title }}</div>
            <div class="introduct">{{ ListBanner1.description }}</div>
            <div class="article">
              {{ ListBanner1.content }}
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="doctors-introduct">
      <div class="img">
        <img :src="ListBanner1.picture" alt="">
      </div>
      <div class="text">
        <div class="text-con">
          <div class="tit">{{ListBanner1.title}}</div>
          <div class="introduct">{{ListBanner1.description}}</div>
          <div class="article">
            {{ListBanner1.content}}
          </div>
        </div>
      </div>
    </div> -->

      <div class="doctors-wrap wow fadeInUp bangxin">
        <div class="item" v-for="(item, index) in ListBanner2" :key="index">
          <img class="pic" :src="item.picture" alt="" />
          <div class="shadow">
            <div class="name">{{ item.title }}</div>
            <div class="post">{{ item.description }}</div>
            <div class="introduct" v-html="item.content"></div>
            <div class="dot">...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// ajax
import { AllContent } from "@/assets/js/api";

import { Component, Vue } from "vue-property-decorator";
import commonHeader from "@/components/headers.vue";
import commonFooter from "@/components/footer.vue";
@Component({
  name: "design",
  components: {
    commonHeader,
    commonFooter,
  },
})
export default class design extends Vue {
  active = 0;
  ListBanner1 = [];
  ListBanner2 = [];

  cutNews(index: number): void {
    console.log(index);
    this.active = index;
  }
  // 跳转锚点
  goAnchor(selector: string): void {
    if (selector) {
      let anchor = this.$el.querySelector(selector);
      if (anchor) {
        console.log(selector, "selector");
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    }
  }
  mounted() {
    let parameter1 = {
      typename: "实力惠元-设计师管理-设计师说明",
      sort: 0,
    };
    // banner
    AllContent(parameter1).then((response: any) => {
      // console.log(response.data, "AllContent")
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          var data = response.data.Data;
          this.ListBanner1 = data[0];
          this.$nextTick(() => {
            if (this.$route.hash) {
              this.goAnchor(this.$route.hash);
            }
          });

          let parameter2 = {
            typename: "实力惠元-设计师管理-图文管理",
            sort: 0,
          };
          // banner
          AllContent(parameter2).then((response2: any) => {
            console.log(response2.data, "AllContent");
            if (response2.data.ReturnCode == 0) {
              if (response2.data.Data) {
                var data = response2.data.Data;
                this.ListBanner2 = data;
                this.$nextTick(() => {
                  if (this.$route.hash) {
                    this.goAnchor(this.$route.hash);
                  }
                });
              }
            }
          });
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/doctors.scss";
</style>
